<template>
  <div>
    <h3 style="padding-left: 10px;">项目完成情况-经销商</h3>
    <div id="reportProjectDealer"></div>
  </div>
</template>

<script>
import { reqProjectByDealerReport } from "@/api/report/projectChart";

import Highcharts from "highcharts/highstock";
// Highcharts.setOptions({
//   lang: {
//     resetZoom: "恢复缩放"
//   }
// });
export default {
  props: {
    query: Object
  },
  data() {
    return {
      options: {
        chart: {
          type: "column"
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        xAxis: {
          categories: []
        },
        yAxis: {
          allowDecimals: false,
          min: 0,
          title: {
            text: "人数"
          }
        },
        tooltip: {
          formatter: function() {
            return (
              "<b>" +
              this.x +
              "</b><br/>" +
              this.series.name +
              ": " +
              this.y +
              " 人" +
              "<br/>" +
              "总量: " +
              this.point.stackTotal +
              " 人"
            );
          }
        },
        plotOptions: {
          column: {
            stacking: "normal"
          }
        },
        series: []
      }
    };
  },
  components: {},
  mounted() {},
  created() {},
  methods: {
    async init(projectID) {
      let res = await reqProjectByDealerReport(projectID);
      if (res.code === 200) {
        this.options.xAxis.categories = res.data.legend;
        this.options.series = res.data.series;
        this.showChart();
      }
    },
    showChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Highcharts.Chart("reportProjectDealer", this.options);
    }
  }
};
</script>


<style lang="scss" scoped>
.h {
  text-align: center;
}
</style>